﻿<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
    style="padding: 20px 30px 0 0;">

    <script type='text/html' template lay-done='layui.data.formdone(d.params);'>
        <input type='hidden' name='PID' value="{{ d.params.PID || '' }}" />
        <input type='text' id="GoodCategoryID" name='GoodCategoryID' value="{{ d.params.GoodCategoryID || '' }}" />
        <input type='hidden' name='DSource' id="DSource" value="{{ d.params.DSource || '' }}" />
    </script>
    <div class='layui-form-item'>
        <label class='layui-form-label'>推荐类型</label>
        <div class='layui-input-block'>
            <div class='layui-input-inline' style="width:350px;">
                <script type='text/html' template>
                    <select name='Type_Sel' id="Type_Sel" lay-filter="selType">
                        <option value='0' {{ d.params.Type_Sel == '0' ? 'selected' : '' }}>分类式主题</option>
                        <option value='1' {{ d.params.Type_Sel == '1' ? 'selected' : '' }}>活动式主题</option>
                    </select>
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="d">
        <label class="layui-form-label">数据来源</label>
        <div class="layui-input-block">
            <script type='text/html' template>
                <input type="radio" lay-filter="selDSource" name="ds" id="ds1" value="0" title="商品分类" {{ (d.params.DSource == '0' || d.params.DSource == '' || d.params.DSource == null) ? 'checked' : '' }}>
                <input type="radio" lay-filter="selDSource" name="ds" id="ds2" value="1" title="主题管理" {{ d.params.DSource == '1' ? 'checked' : '' }}>
                <input type="radio" lay-filter="selDSource" name="ds" id="ds3" value="2" title="页面跳转" {{ d.params.DSource == '2' ? 'checked' : '' }}>
            </script>
        </div>
    </div>
    <div class='layui-form-item' id="c" style="display:none">
        <!--<label class='layui-form-label'>商品分类 <label style="color: red">*</label></label>
        <div class='layui-input-block'>
            <div class='layui-input-inline' style="width:350px;">
                <script type='text/html' template lay-done='layui.data.getSelSource(d.params,"1");'>
                    <select name="cateID" xm-select="cateID" xm-select-radio="" xm-select-search="" xm-select-skin="default">
                        <option value=""></option>
                    </select>
                </script>
            </div>
        </div>-->
   
            <label class='layui-form-label'>所属分类<span style="color:red">*</span></label>
            <div class='layui-input-inline' style="width:705px;">
                <script type='text/html' template lay-done='layui.data.getSelSource(d.params,"GoodsCategoryID_SelSource");'>
                    <select name="select1" id="select1" xm-select="select1"  xm-select-radio="" xm-select-search xm-select-skin="default">
                        <option value=""></option>
                    </select>
                </script>
            </div>
        
    </div>

    <div class='layui-form-item' id="t" style="display:none">
        <label class='layui-form-label'>主题<label style="color: red">*</label></label>
        <div class='layui-input-block'>
            <div class='layui-input-inline' style="width:350px;">
                <script type='text/html' template lay-done='layui.data.getSelSource(d.params,"2");'>
                    <select name='theme' id="theme" lay-search lay-filter="selTheme">
                        <option value=''></option>
                    </select>
                </script>
            </div>
        </div>
    </div>
    <div class='layui-form-item' id="k" style="display:none">
        <label class='layui-form-label'>跳转地址<label style="color: red">*</label></label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template lay-done='layui.data.getSelSource(d.params,"3");'>
                <select name='pageType' id='pageType' lay-verify='' lay-filter='pageType'>
                    <option value=""></option>
                    <option value='0'>优惠券</option>
                    <option value='1'>商品列表</option>
                </select>           
             </script>
        </div>
    </div>

    <div class='layui-form-item'>
        <label class='layui-form-label'>推荐标题 <label style="color: red">*</label></label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template>
                <input type='text' name='Title' id="Title" value='{{ d.params.Title || '' }}' lay-verify='required' placeholder='推荐标题' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>

    <div class='layui-form-item'>
        <label class='layui-form-label'>图片/图标<span style="color:red">*</span></label>
        <div class='layui-input-inline' style="width:80%">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="selectImg">选择图片</button> <span id="imgsp">建议尺寸 80px * 80px</span>
                <div class="layui-upload-list" id="divImgs"></div>
                <script type='text/html' template lay-done='layui.data.setUploads(d.params);'>
                    <input type="hidden" name="Image_Upload" id="Image_Upload" value="{{ d.params.Image_Upload || '' }}">
                </script>
                <hr />
            </div>
        </div>
    </div>

    <div class='layui-form-item' id="stylediv">
        <label class='layui-form-label'>主题风格</label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template>
                <select name='Style'>
                    <option value='0' {{ d.params.Style == '0' ? 'selected' : '' }}>横排-大</option>
                    <option value='1' {{ d.params.Style == '1' ? 'selected' : '' }}>横排-小</option>
                </select>
            </script>
        </div>
    </div>
    <!--<div class='layui-form-item' id="xctdiv" style="display:none">
        <label class='layui-form-label'>宣传图</label>
        <div class='layui-input-inline' style="width:80%">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="selectImg1">选择图片</button> <span>建议尺寸 750px * 320px</span>
                <div class="layui-upload-list" id="divImgs1"></div>
                <script type='text/html' template lay-done='layui.data.setUploads1(d.params);'>
                    <input type="hidden" name="Image1_Upload" id="Image1_Upload" value="{{ d.params.Image1_Upload || '' }}">
                </script>
                <hr />
            </div>
        </div>
    </div>-->
    <!--<div class='layui-form-item' id="colordiv" style="display:none">
        <label class='layui-form-label'>背景颜色</label>
        <div class="layui-input-inline" style="width: 120px;">
            <script type='text/html' template lay-done='layui.data.getColor(d.params);'>
                <input type="text" id="Color" name="Color" value="{{ d.params.Color || "" }}" readonly="readonly" placeholder="请选择颜色" class="layui-input">
            </script>
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="test-form"></div>
        </div>
    </div>-->
    <div class='layui-form-item'>
        <label class='layui-form-label'>描述/说明</label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template>
                <textarea name="Description" placeholder="请输入内容" class="layui-textarea">{{ d.params.Description || '' }}</textarea>
            </script>
        </div>
    </div>

    <div class='layui-form-item'>
        <label class='layui-form-label'>有效时间</label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template lay-done='layui.data.datedone(d.params);'>
                <input type='text' name='VailTime' readonly='readonly' id='VailTime' placeholder='开始时间 ~ 结束时间' autocomplete='off' class='layui-input'>
                <input type="hidden" id="BegTime" name="BegTime" value="{{ d.params.BegTime || '' }}" />
                <input type="hidden" id="EndTime" name="EndTime" value="{{ d.params.EndTime || '' }}" />
            </script>
        </div>
    </div>

    <div class='layui-form-item'>
        <label class='layui-form-label'>排序</label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template>
                <input type='text' name='Sort' value='{{ d.params.Sort || '0' }}' placeholder='排序' lay-verify='number' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>

    <div class='layui-form-item'>
        <label class='layui-form-label'>是否启用</label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template>
                <select name='IsAble'>
                    <option value='1' {{ d.params.IsAble == '1' ? 'selected' : '' }}>启用</option>
                    <option value='0' {{ d.params.IsAble == '0' ? 'selected' : '' }}>不启用</option>
                </select>
            </script>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="确认" class="layui-btn">
        </div>
    </div>
</div>
<style>
    .layui-upload-img {
        width: 100px;
        height: auto;
    }
</style>

<script type="text/javascript">

    var formSelects; var form; var admin; var $;

    layui.data.getColor = function (d) {
        layui.use(['form', 'admin', 'colorpicker'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;
            var colorpicker = layui.colorpicker;

            var color = "#ffffff";
            if (d.Color != "" && d.Color != null)
                color = d.Color;
            else
                $('#Color').val(color);
            //表单赋值
            colorpicker.render({
                elem: '#test-form'
                , color: color //设置默认色
                , done: function (color) {
                    $('#Color').val(color);
                }
            });
        });
    }

    layui.data.getSelSource = function (d, sourceName) {
        layui.use(['form', 'admin', 'formSelects'], function () {
            $ = layui.$;
            form = layui.form;
            admin = layui.admin;
            formSelects = layui.formSelects;
            if (sourceName == "GoodsCategoryID_SelSource") {

                formSelects.config('select1', {
                    keyName: 'Name',            //自定义返回数据中name的key, 默认 name
                    keyVal: 'PID',            //自定义返回数据中value的key, 默认 value
                    keyChildren: 'children',    //联动多选自定义children
                });
                LoadCate(d.GoodCategoryID);
            }

            //if (sourceName == "1") {
            //    getCate(d.GoodCategoryID);
            //}
            if (sourceName == "2") {
                getTheme(d.GoodCategoryID);
            }

            if (sourceName == "3") {
                $("#pageType").val(d.GoodCategoryID);
                form.on('select(pageType)', function (data) {
                    $("#GoodCategoryID").val(data.value);
                })

            }

            if (d.DSource == 0 || d.DSource == "" || d.DSource == null) {
                $("#c").show();
                $("#t").hide();
                $("#k").hide();
            } else if (d.DSource == 1) {
                $("#c").hide();
                $("#t").show();
                $("#k").hide();
            } else {
                $("#c").hide();
                $("#t").hide();
                $("#k").show();
            }
            // loaddiv(d.DSource);
        });
    }

    function LoadCate(cateid) {

        layui.use(['form', 'admin', 'formSelects'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;

            var formSelects = layui.formSelects;

            admin.req({
                url: layui.setter.APIUrl + '/shop/GoodsCategoryMgr/customerQuery', //实际使用请改成服务端真实接口
                type: 'post',
                done: function (res1) {
                   
                    formSelects.data('select1', 'local', {
                        arr: res1.Data
                    });
                  
                    layui.formSelects.value('select1', [cateid]);
                  
                }
            });
         
            formSelects.on('select1', function (id, vals, val, isAdd, isDisabled) {
              
            if (isAdd == true) {
                $("#GoodCategoryID").val(val.PID);
            } else {
                $("#GoodCategoryID").val("");
            }
                    });
       
        });
          
       
    }

    function getCate(cid) {
        formSelects.config('cateID', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/goodscategoryMgr/customerQueryChildren', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                //debugger;
                layui.formSelects.data('cateID', 'local', {
                    arr: res.Data,
                });
                formSelects.value("cateID", [cid]);
            }
        });
        formSelects.on('cateID', function (id, vals, val, isAdd, isDisabled) {
            if (isAdd == true) {
                $("#GoodCategoryID").val(val.id);
            } else {
                $("#GoodCategoryID").val("");
            }
        });
   
      

    }

    function getTheme(tid) {

        admin.req({
            url: layui.setter.APIUrl + '/shop/themeMgr/customerQuery', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                layui.each(res.Data, function (index, eachdata) {
                    var strIsSel = '';
                    if (eachdata.PID == tid)
                        strIsSel = "selected='selected'";
                    $("#theme").append("<option value='" + eachdata.PID + "' " + strIsSel + ">" + eachdata.Name + "</option>");
                });
                form.render('select');
            }
        });

        form.on('select(selTheme)', function (data) {
            $("#GoodCategoryID").val(data.value);
        });
    }


    layui.data.getColor = function (d) {
        layui.use(['form', 'admin', 'colorpicker'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;
            var colorpicker = layui.colorpicker;

            var color = "#ffffff";
            if (d.Color != "" && d.Color != null)
                color = d.Color;
            else
                $('#Color').val(color);
            //表单赋值
            colorpicker.render({
                elem: '#test-form'
                , color: color //设置默认色
                , done: function (color) {
                    $('#Color').val(color);
                }
            });
        });
    }

    layui.data.setUploads = function (d) {
        layui.use(['jquery', 'upload', 'admin'], function () {
            window.jQuery = window.$ = layui.jquery;
            upload = layui.upload,
                admin = layui.admin;
            //多图上传
            var uploadInst = upload.render({
                elem: '#selectImg'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        addImg(res.Data);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
            var pics = d.Image_Upload;
            if (pics != "" && pics != null && pics != 'null') {
                addImg({ name: pics, path: layui.setter.ImgPath + pics });
            }
        })
    }

    function addImg(src) {
        var div = "divimg3";
        var img = "Img3";
        var html = "    <div style=\"line-height:100px;float:left\" id='" + div + "'> " +
            " <a style=\"float:right;line-height:10px;background-color:#ff0000;font-size:24px;color:white;border-top:3px solid #ff0000\" onclick=\"deletp3()\">×</a> " +
            " <img id='" + img + "' src=\"" + src.path + "\"   alt=\"\" class=\"layui-upload-img\">" +
            "</div>";
        $('#divImgs').html(html);
        $("#Image_Upload").val(src.name);
    }
    //删除图片
    function deletp3() {
        $('#divImgs').html("");
        $("#Image_Upload").val("");
    }



    layui.data.setUploads1 = function (d) {
        layui.use(['jquery', 'upload', 'admin'], function () {
            window.jQuery = window.$ = layui.jquery;
            upload = layui.upload,
                admin = layui.admin;
            //多图上传
            var uploadInst = upload.render({
                elem: '#selectImg1'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        addImg1(res.Data);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
            var pics = d.Image1_Upload;
            if (pics != "" && pics != null && pics != 'null') {
                addImg1({ name: pics, path: layui.setter.ImgPath + pics });
            }
        })
    }

    function addImg1(src) {
        var div = "divimg1";
        var img = "Img1";
        var html = "    <div style=\"line-height:100px;float:left\" id='" + div + "'> " +
            " <a style=\"float:right;line-height:10px;background-color:#ff0000;font-size:24px;color:white;border-top:3px solid #ff0000\" onclick=\"deletp1()\">×</a> " +
            " <img id='" + img + "' src=\"" + src.path + "\"   alt=\"\" class=\"layui-upload-img\">" +
            "</div>";
        $('#divImgs1').html(html);
        $("#Image1_Upload").val(src.name);
    }
    //删除图片
    function deletp1() {
        $('#divImgs1').html("");
        $("#Image1_Upload").val("");
    }




    layui.data.formdone = function (d) {
        if (d.Type_Sel == 1) {
            $("#imgsp").text("建议尺寸 718px * 201px");
            //$("#xctdiv").show();
            //$("#colordiv").show();
            $("#stylediv").show();

            $("#d").hide();

        } else {
            $("#imgsp").text("建议尺寸 80px * 80px");
            //$("#xctdiv").hide();
            //$("#colordiv").hide();
            $("#stylediv").hide();
        }
        
        // if(d.DSource==0)
        // {
        //     $("#c").show();
        //     $("#t").hide();
        //     $("#k").hide();
        // }

        // if(d.DSource==1)
        // {
        //     $("#c").hide();
        //     $("#t").show();
        //     $("#k").hide();


        //     $("#theme").val(d.GoodCategoryID);
        // }

        // if(d.DSource==2)
        // {
        //     $("#c").hide();
        //     $("#t").hide();
        //     $("#k").show();

        //     $("#pageType").val(d.GoodCategoryID);
        // }
    }

    layui.data.datedone = function (d) {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var $ = layui.$;

            var value = "";
            if (d.BegTime != "" && d.BegTime != null) {
                value = d.BegTime + " ~ " + d.EndTime;
            }
            laydate.render({
                elem: '#VailTime',
                type: 'datetime',
                range: '~', //指定元素
                value: value,
                min: 0,
                done: function (value, date, endDate) {
                    if (value != "") {
                        var times = value.split('~');
                        $("#BegTime").val(times[0].trim());
                        $("#EndTime").val(times[1].trim());
                    } else {
                        $("#BegTime").val("");
                        $("#EndTime").val("");
                    }
                    $("#VailTime").val(value);
                }
            });
        });
    }

    layui.use(['form'], function () {
        $ = layui.$;
        form = layui.form;
        admin = layui.admin;

        form.on('select(selType)', function (data) {
            if (data.value == 1) {
                $("#imgsp").text("建议尺寸 718px * 201px");
                //$("#xctdiv").show();
                //$("#colordiv").show();
                $("#stylediv").show();

                $("#d").hide();
                $("#DSource").val(1);
                $("#c").hide();
                $("#t").show();
                $("#k").hide();

                $("#GoodCategoryID").val("");
                formSelects.value("cateID", []);
                $("#theme").val("");
                $("#Title").val("");
                $("#Keywords").val("");
                form.render('select');
            } else {
                $("#imgsp").text("建议尺寸 80px * 80px");
                //$("#xctdiv").hide();
                //$("#colordiv").hide();
                $("#stylediv").hide();

                $("#d").show();
                $("#DSource").val(0);
                $("#c").show();
                $("#t").hide();
                $("#k").hide();

                $("#GoodCategoryID").val("");
                formSelects.value("cateID", []);
                $("#theme").val("");
                $("#Title").val("");
                form.render('select');
            }
            $('#ds1').prop("checked", true);
            form.render("radio");

            //loaddiv($("#DSource").val());
        });

        form.on('radio(selDSource)', function (data) {
            $("#DSource").val(data.value);
            if (data.value == 0) {
                $("#c").show();
                $("#t").hide();
                $("#k").hide();
            } else if (data.value == 1) {
                $("#c").hide();
                $("#t").show();
                $("#k").hide();
            } else {
                $("#c").hide();
                $("#t").hide();
                $("#k").show();
            }
            $("#GoodCategoryID").val("");
            formSelects.value("cateID", []);
            $("#theme").val("");
            $("#Title").val("");
            $("#Keywords").val("");
            form.render('select');
        });
    });

    function loaddiv(source) {
        //debugger;
        //if (type != 1) {
        //    $("#d").show();
        //    $("#g").show();
        //    $("#h").show();
        //    $("#z").show();
        //    $("#b").show();
        //    if (source != 1) {
        //        $("#c").show();
        //        $("#t").hide();
        //    } else {
        //        $("#c").hide();
        //        $("#t").show();
        //    }
        //} else {
        //    $("#d").hide();
        //    $("#g").hide();
        //    $("#h").hide();
        //    $("#z").hide();
        //    $("#c").show();
        //    $("#t").hide();
        //    $("#b").hide();
        //}
    }


    function SelIcon() {
        layui.use(['form', 'admin'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;
            var view = layui.view;
            admin.popup({
                title: '选择图标'
                , area: ['750px', '520px']
                , skin: "layui-layer-lan"
                , id: 'LAY-popup-content-icon'
                , success: function (layero, index) {
                    view(this.id).render('/system/Icons', null).done(function () {
                        $("img").click(function () {
                            var src = $(this).attr("src");
                            $("#Image_Upload").val(src);
                            layer.close(index);
                        })
                    });
                }
            });
        });
    }
</script>